<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" media="screen">
			<script src="${pageContext.request.contextPath}/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
			  <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
			  <style type="text/css">
		 <style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
      }

      .form-signin {
        max-width: 300px;
        padding: 19px 29px 29px;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
      .form-signin .form-signin-heading,
      .form-signin .checkbox {
        margin-bottom: 10px;
      }
      .form-signin input[type="text"],
      .form-signin input[type="password"] {
        font-size: 16px;
        height: auto;
        margin-bottom: 15px;
        padding: 7px 9px;
      }

    </style>
			  </style>
	</head>
	<body>
		 <div class="container" >

      <form class="form-signin" action="login" method="post">
        <h2 class="form-signin-heading">注册界面</h2>
         <input type="hidden" value="register" name="op">	
        <input type="text" class="input-block-level" placeholder="用户名" name="username" id="username">
        	<span id="span1"></span>
        	<p></p>
        <input type="password" class="input-block-level" placeholder="密码" name="password" id="psw1">
        	<span id="span2"></span>
        	        	<p></p>
        <input type="password" class="input-block-level" placeholder="确认密码"  id="psw2">
        	<span id="span3"></span>
        	<p></p>
          <input type="text" class="input-block-level" placeholder="验证码"  id="codev" >	
           <span id="span4"></span>
         <p style="text-align: center;"> <img src="image" id="code"/>
           
         </p>
        
        <p style="text-align: center;"><input class="btn btn-large btn-primary" type="submit" value="提交"></input></p>
        
        
      </form>

    </div> <!-- /container -->
    <script type="text/javascript">
			   
			      	  $("#username").focus(function(){
			      	  	  $("#span1").html("请输入用户名");
			      	  });
			      	   $("#username").blur(function(){
			      var $username = $("#username").val();	      	  	
			      	  	  if($username==""){
			      	  	  	   $("#span1").html("用户名不能为空");
			      	  	  };
			      	  	  if($username!=""){
			      	  	  	  $("#span1").html("");
			      	  	  };
			      	  });
			      	  
			      	    $("#psw1").focus(function(){
			      	  	  $("#span2").html("请输入密码");
			      	  });
			      	   	   $("#psw1").blur(function(){
			      var $psw1 = $("#psw1").val();	      	  	
			      	  	  if($psw1==""){
			      	  	  	   $("#span2").html("密码不能为空");
			      	  	  };
			      	  	  if($psw1!=""){
			      	  	  	  $("#span2").html("");
			      	  	  };
			      	  });
			      	      $("#psw2").focus(function(){
			      	  	  $("#span3").html("请确认密码");
			      	  });
			      	   	   $("#psw2").blur(function(){
			      	   	   	 var $psw1 = $("#psw1").val();	
			                 var $psw2 = $("#psw2").val();	      	  	
			      	  	  if($psw1!=$psw2){
			      	  	  	   $("#span3").html("密码不一致");
			      	  	  };
			      	  	  if($psw1==$psw2){
			      	  	  	  $("#span3").html("");
			      	  	  };
			      	  });
			      	 
			      	  $("#code").click(function(){
			      		 
			    			this.src="image?a="+new Date();
			    			 
			    		});
			      	   $("#codev").focus(function(){
				      	  	  $("#span4").html("请输入验证码");
				      	  });
			      	$("#codev").blur(function(){
				         $.ajax({url: "codeq?code="+$("#codev").val(),
				        		 type:"get",
				        		 success:function(msg){
				        			 $("#span4").html(msg==1?"验证码正确":"验证码错误重新输入");
				        			         }
				                             });
				        		 });
			      
		</script>
	</body>
</html>
